<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人工智障</title>

    <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>


    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <header>
        <h1>我是标题</h1>
        第<span id="imgNumber">0</span>张图片
        <button onclick="auto()">自动</button>
        <button onclick="stop()">停下来</button>
        <button onclick="getBeforeOne()">上一个</button>
        <button onclick="getNextOne()">下一个</button>
    </header>

    <main>
        <div id="board">
        </div>
    </main>
    <footer></footer>
    <script type="text/javascript">
        var imgNumber = 0;
        var flag = true;

        function getBeforeOne() {
            if (imgNumber <= 1) {
                return;
            }
            imgNumber--;
            getImgData();
        }

        function getNextOne() {
            imgNumber++;
            if (imgNumber >= 5999) {
                imgNumber = 0;
            }
            getImgData();
        }

        var autoMove;

        function auto() {
            flag = true;
            autoMove = setInterval(function() {
                getNextOne();
            }, 1500);
        }

        function stop() {
            clearTimeout(autoMove);
        }


        function getImgData() {
            $("#board").children().remove();
            $.get(
                "getData", {
                    "imgNumber": imgNumber
                },
                function(result) {

                    $("#imgNumber").text(imgNumber);
                    $.each(result, function(i, color) {
                        var item = "<div class='grid' style='background-color: " + color + "';'></div>"
                        $("#board").append(item);
                    })
                }
            );
        }
    </script>
</body>

</html>